<!--
/**
 * This file is part of the smilText parser implemented in JavaScript,
 *
 * Copyright (C) 2003-2009 Stichting CWI, 
 * Science Park 123, 1098 XG Amsterdam, The Netherlands.
 *
 * smilText parser in JavaScript is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * smilText parser in JavaScript is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with smilText parser in JavaScript; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */

/**
 @version 1.0
 @author <a href="mailto:rlaiola@cwi.nl">Rodrigo Laiola Guimaraes</a>
*/
-->

<HTML>
<HEAD>
<script type="text/javascript" src="../src/scripts/jsoner.commons.js"></script>
<script type="text/javascript" src="../src/scripts/com.iskitz.ajile.1.2.1.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.adt.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.util.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.smilText.Time.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.smilText.js"></script>
</HEAD>
<BODY>

<H2>smilText Examples: TextMotion Module</H2>

<!-- smilText tag inside the html file -->
<H3>Example 20: textMode = crawl</H3>
<H4 style='color:red'>Note: FF seems to have a problem identifying the region's boundaries when the crawl mode is used with  xml:space='preserve'.</H4>
<DIV id="region20" style="background-color:red;width:500">
	<smilText textMode="crawl" textBackgroundColor="yellow">
	smilText can crawl text! Check it out!!!
	<div>
	Hi
	<p textBackgroundColor="green">
	Hello
	<br/>
	<span textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[0].play()">Play</A>
<A HREF="javascript:docs[0].pause()">Pause</A>
<A HREF="javascript:docs[0].stop()">Stop</A>

<!-- smilText tag inside the html file -->
<H3>Example 21: textMode = scroll</H3>
<DIV id="region21" style="background-color:red;width:500">
	<smilText textMode="scroll" textBackgroundColor="yellow" width="200">
	smilText can scroll text! Check it out!!!
	<div>
	Hi
	<p textBackgroundColor="green">
	Hello
	<br/>
	<span textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[1].play()">Play</A>
<A HREF="javascript:docs[1].pause()">Pause</A>
<A HREF="javascript:docs[1].stop()">Stop</A>
<br/>

<!-- smilText tag inside the html file -->
<H3>Example 22: textMode = jump (TODO)</H3>
<DIV id="region22" style="background-color:red;width:500;height:100">
	<smilText textMode="jump" textBackgroundColor="yellow" width="200">
	smilText can jump text! Check it out!!!
	<div textFontSize="8">
	Hi
	<p textFontSize="16" textBackgroundColor="green">
	Hello
	<br/>
	<span textFontSize="20" textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[2].play()">Play</A>
<A HREF="javascript:docs[2].pause()">Pause</A>
<A HREF="javascript:docs[2].stop()">Stop</A>
<br/>

<!-- smilText tag inside the html file -->
<H3>Example 23: textRate attribute</H3>

<H4 style='color:red'>Note: IE seems to present a problem while using different textRates. I did not find out the reason yet.</H4>

<H4>Crawl mode</H4>
<DIV id="region230" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="1" textMode="crawl" textBackgroundColor="yellow">
	textRate = 1px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[3].play()">Play</A>
<A HREF="javascript:docs[3].pause()">Pause</A>
<A HREF="javascript:docs[3].stop()">Stop</A>
<br/>

<DIV id="region23" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="10px" textMode="crawl" textBackgroundColor="yellow" width="200">
	textRate = 10px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[4].play()">Play</A>
<A HREF="javascript:docs[4].pause()">Pause</A>
<A HREF="javascript:docs[4].stop()">Stop</A>
<br/>

<DIV id="region231" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="100" textMode="crawl" textBackgroundColor="yellow" width="200">
	textRate = 100px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[5].play()">Play</A>
<A HREF="javascript:docs[5].pause()">Pause</A>
<A HREF="javascript:docs[5].stop()">Stop</A>
<br/>

<H4>Scroll mode</H4>
<DIV id="region232" style="background-color:red;width:200">
	<smilText textRate="1" textMode="scroll" textBackgroundColor="yellow" width="200">
	textRate = 1px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[6].play()">Play</A>
<A HREF="javascript:docs[6].pause()">Pause</A>
<A HREF="javascript:docs[6].stop()">Stop</A>
<br/>

<DIV id="region233" style="background-color:red;width:200">
	<smilText textRate="5px" textMode="scroll" textBackgroundColor="yellow" width="200">
	textRate = 5px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[7].play()">Play</A>
<A HREF="javascript:docs[7].pause()">Pause</A>
<A HREF="javascript:docs[7].stop()">Stop</A>
<br/>

<DIV id="region234" style="background-color:red;width:200">
	<smilText textRate="10" textMode="scroll" textBackgroundColor="yellow">
	textRate = 10px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[8].play()">Play</A>
<A HREF="javascript:docs[8].pause()">Pause</A>
<A HREF="javascript:docs[8].stop()">Stop</A>
<br/>

<H4>Jump mode (TODO)</H4>
<DIV id="region235" style="background-color:red;width:500;height:20">
</DIV>

<!-- smilText tag inside the html file -->
<H3>Example 24: textConceal attribute (TODO) </H3>
<DIV id="region24" style="background-color:red;width:500;height:20">
</DIV>

<script>
Import ("cwi.smilText.STDocument");
var docs = cwi.smilText.Parser.parseHTML();
for (i = 0; i < docs.length; i++) {
	docs[i].play();
}
</script>

</BODY>
</HTML>